//找到addBtn按钮
let addBtn = document.querySelector('#addBtn');

//获得input文本框
let nameInput = document.querySelector('#nameInput');
let emailInput = document.querySelector('#emailInput');
let jobInput = document.querySelector('#jobInput');

//获得tbody
let dataTbody = document.querySelector('#dataTbody');

//为addBtn添加单击事件（监听）
addBtn.addEventListener('click', () => {
  //获得input文本框的值
  let name = nameInput.value;
  let email = emailInput.value;
  let job = jobInput.value;

  //创建一个emp的json对象
  let emp = {
    name: name,
    email: email,
    job: job,
  };

  //将emp转成字符串
  let empStr = JSON.stringify(emp);

  //创建tr
  //tr的模板代码
  let trTemp = ` 
                    <th scope="row">1</th>
                    <td><input type="checkbox"></td>
                    <td>${name}</td>
                    <td>${job}</td>
                    <td>${email}</td>
                    <td>
                        <button type="button" class="btn btn-link" onclick="removeData(this)">删除</button>
                        <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-whatever='${empStr}' data-bs-target="#empModal">修改</button>
                    </td>
                `;

  let tr = document.createElement('tr');
  tr.innerHTML = trTemp;
  dataTbody.appendChild(tr);
});

//删除数据
let removeData = (obj) => {
  let tr = obj.parentNode.parentNode;
  let flag = confirm('确定删除吗？');
  console.log(tr);
  if (flag) {
    dataTbody.removeChild(tr);
  }
};

//全选
let selectAllBtn = document.querySelector('#selectAllBtn');

selectAllBtn.addEventListener('click', () => {
  let checkInputs = document.querySelectorAll(
    '#dataTbody input[type=checkbox]'
  );
  console.log(checkInputs.length);
  checkInputs.forEach((item) => {
    item.checked = true;
  });
});


//反选
let reverseBtn = document.querySelector('#reverseBtn');

reverseBtn.addEventListener('click', () => {
  let checkInputs = document.querySelectorAll(
    '#dataTbody input[type=checkbox]'
  );
  console.log(checkInputs.length);
  checkInputs.forEach((item) => {
    if (item.checked) {
      item.checked = false;
    } else {
      item.checked = true;
    } 
  });
});

//删除所选
let deleteSelectBtn = document.querySelector('#deleteSelectBtn');

deleteSelectBtn.addEventListener('click', () => {
  let checkInputs = document.querySelectorAll(
    '#dataTbody input[type=checkbox]'
  );
  console.log(checkInputs.length);
  checkInputs.forEach((item) => {
    if (item.checked) {
      let tr = item.parentNode.parentNode;
      dataTbody.removeChild(tr);
      
    } 
  });
});


//清空数据
let clearBtn = document.querySelector('#clearBtn');
clearBtn.addEventListener('click', () => {
  dataTbody.innerHTML = '';
});

//向模态框中传递数据
let empModal = document.querySelector('#empModal');
empModal.addEventListener('show.bs.modal', (event) => {
  let button = event.relatedTarget; //事件源
  //获得指定属性的值
  let dataInfo = button.getAttribute('data-bs-whatever');
  console.log(dataInfo);
});




// 获取模态框内的编辑表单元素
const editNameInput = document.getElementById('editNameInput');
const editJobInput = document.getElementById('editJobInput');
const editEmailInput = document.getElementById('editEmailInput');

// 获取修改按钮
const saveChangesBtn = document.getElementById('saveChangesBtn');

// 当模态框显示时，从按钮的data-bs-whatever属性获取JSON字符串，并填充到表单中
empModal.addEventListener('shown.bs.modal', (event) => {
  const button = event.relatedTarget;
  const dataInfo = button.getAttribute('data-bs-whatever');
  const emp = JSON.parse(dataInfo);

  editNameInput.value = emp.name;
  editJobInput.value = emp.job;
  editEmailInput.value = emp.email;
});

// 为修改按钮添加事件监听器，处理数据更新逻辑
saveChangesBtn.addEventListener('click', () => {
  const selectedRow = empModal.previousElementSibling; // 获取当前激活的模态框前一个元素（即触发修改的行）

  const editedEmp = {
    name: editNameInput.value,
    job: editJobInput.value,
    email: editEmailInput.value,
  };

  // 更新表格中的对应单元格
  selectedRow.querySelectorAll('td')[2].textContent = editedEmp.name;
  selectedRow.querySelectorAll('td')[3].textContent = editedEmp.job;
  selectedRow.querySelectorAll('td')[4].textContent = editedEmp.email;
});